<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <!-- 引入 ECharts 文件 -->
    <!--<script th:src="@{/js/sys/echarts.simple.min.js}"></script>-->
    <script th:src="@{/js/sys/echarts.common.min.js}"></script>
    <script th:src="@{/js/common/jquery-2.1.1.min.js}"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main4" style="width: 100%; height: 500px; "></div>
<div id="main" style="width: 100%; height: 500px; "></div>
<div id="main2" style="width: 100%; height: 500px; "></div>
<div id="main3" style="width: 100%; height: 500px; "></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    var myChart4 = echarts.init(document.getElementById('main4'));

    $.get('data.json').done(function (data) {
        myChart4.setOption(
            {
                title : {
                    text: '8点时刻与10点时刻',
                    subtext: '内存变化'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['8点','10点']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : data.times
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'10点',
                        type:'bar',
                        data:data.list,
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'8点',
                        type:'bar',
                        data:data.list2,
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            });

        myChart.setOption({
            title: {
                text: '后台接口数据监控'
            },
            tooltip: {},
            legend: {
                data:['内存消耗']
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.times
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '内存消耗',
                type: 'line',
                data: data.list
            }]
        });

        myChart2.setOption({

            tooltip: {},
            legend: {
                data:['内存递增']
            },
            xAxis: {
                data: data.times
            },
            yAxis: {

            },
            series: [{
                name: '内存递增',
                type: 'bar',
                data: data.diff
            }]
        });

        myChart3.setOption({

            tooltip: {},
            legend: {
                data:['初始递增']
            },
            xAxis: {
                data: data.times
            },
            yAxis: {

            },
            series: [{
                name: '初始递增',
                type: 'bar',
                data: data.diff2
            }]
        });
    });
</script>
</body>
</html>